<template>
  <!-- 
外部组件使用
import xxx from './components/xxx.vue'
  components: { xxx,  },



  xxx: {
    show: false,
    formData: {},
  }

  <SkuDetail 
  :show.sync="xxx.show"
  @getList="getList" 
  :formData="xxx.formData" 
  :type="xxx.formData" 
  />


   -->
  <el-dialog
    width="800px"
    title="弹窗示例"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel">
    <el-row style="margin-bottom: 10px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px">
        <el-form-item label="jan编码" prop="janCode">
          <el-input v-model="queryParams.janCode" clearable @keyup.enter.native="getList" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      @select="handleTableSelect"
      ref="TableRef"
      :data="tableData"
      @selection-change="(rows) => (tableCheck = rows)">
      <el-table-column :selectable="() => true" type="selection" width="55" align="center" />
      <el-table-column show-overflow-tooltip align="center" label="jan编码" prop="janCode" />
      <el-table-column show-overflow-tooltip align="center" label="是否被使用" prop="roleName" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleSubmit" type="primary">{{ $t('确定') }}</el-button>
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSellerUserList } from '@/api/platform/sellerManage'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * type
     */
    type: {
      type: String,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      showSearch: true,
      tableCheck: [],
      tableData: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    handleSubmit() {
      if (this.tableCheck.length == 0) {
        return this.$message({ type: 'error', message: '请选择' })
      }
      this.$emit('selected', this.tableCheck)
      this.cancel()
    },
    handleTableSelect(selection, row) {
      if (selection.length > 1) {
        this.$message({ type: 'error', message: '只能选择一个' })
        this.$refs['TableRef'].toggleRowSelection(row)
      }
    },

    getList() {
      getSellerUserList(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },

    cancel() {
      this.$emit('update:show', false)
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-table__header {
  thead {
    tr {
      th {
        &:nth-child(1) {
          .cell {
            display: none;
          }
        }
      }
    }
  }
}
</style>
